<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style="float: right; padding:3px 0" type="text" @click="cancelForm">返回列表</el-button>
      </div>
      <div style="max-width:1000px;margin:auto;">
        <el-form
          ref="form"
          :model="form"
          :rules="form.houseType==0?rulesPesonal:rules"
          class="table-form"
          size="small"
        >
          <table class="table table-bordered th-bg">
            <tbody>
              <tr>
                <th width="200">资讯类型</th>
                <td >
                  <el-form-item prop="type">
                    <el-radio-group v-model="form.type" style="width:180px">
                      <el-radio :label="1">转发链接</el-radio>
                      <el-radio :label="2">自建</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </td>
             </tr>
             <tr>
                <th width="200">资讯标题</th>
                <td >
                  <el-form-item prop="title">
                    <el-input v-model="form.title"/>
                  </el-form-item>
                </td>
              </tr>
              
              <tr v-if="form.type=='2'">
                <th width="200">资讯内容</th>
                <td >
                  <el-form-item prop="content" class="editor">
                    <div style="border: 1px solid #ccc;">
                      <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editor"
                        :defaultConfig="toolbarConfig"
                        :mode="mode"
                      />
                      <Editor
                        style="height: 500px; overflow-y: hidden; word-wrap: break-word;"
                        v-model="form.content"
                        :defaultContent="defaultContent"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        @onCreated="onCreated"
                      />
                    </div>
                  </el-form-item>
                </td>
              </tr>
              <tr v-if="form.type=='1'">
                <th width="200">资讯链接</th>
                <td>
                  <el-form-item prop="link">
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请输入资讯链接"
                      v-model="form.link">
                    </el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th width="200px">截止时间</th>
                <td>
                  <el-form-item prop="deadline">
                    <el-date-picker
                      v-model="form.deadline"
                      type="datetime"
                      clearable
                      size="small"
                      placeholder="请选择截止时间"
                      class="filter-item"
                      format="yyyy-MM-dd HH"
                      value-format="yyyy-MM-dd HH"
                      style="width: 200px"
                      >
                    </el-date-picker>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
          <div style="display:flex; align-item: center; justify-content: center; margin-top:20px;">
            <el-button
              :loading="loading"
              type="primary"
              size="small"
              @click="submitForm"
            >
              {{isEdit ? '更新资讯' : '新增资讯'}} 
            </el-button>            
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import crudNews from '@/api/business/news'
import { MessageBox } from 'element-ui'
import { newsTypeList } from '@/utils/index.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const defaultForm = {
  
}

export default {
  components: {
    Editor, 
    Toolbar
  },
  computed: {
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      newsTypeList,
      form: JSON.parse(JSON.stringify(defaultForm)),
      rules: {
        content: [
          {
            required: true,
            message: '请输入资讯内容'
          }
        ],
        title: [
          {
            required: true,
            message: '请输入资讯标题'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择资讯类型'
          }
        ],
        link: [
          {
            required: true,
            message: '请输入资讯链接'
          }
        ]
      },
      loading: false,
      id: null,
      editor: null,
      html: '',
      toolbarConfig: { 
        excludeKeys: [
	        'fullScreen',
          'uploadVideo',
          'uploadImage'
	      ]
      },
      editorConfig: { 
        placeholder: '请输入内容...',
        MENU_CONF: {
          lineHeight: {
            lineHeightList: ['0.5', '1', '1.5', '2', '2.5']
          }
        }
      },
      mode: 'default', // or 'simple'
      defaultContent : [
        {
          type: 'paragraph',
          lineHeight: '1.5',
          children: [
            { text: '', fontSize: '15px' },
          ]
        }
      ]
    }
  },

  created() {
    if (this.isEdit) {
      this.id = this.$route.params && this.$route.params.id
      this.fetchData(this.id)
    }else {
    }
  },
  computed: {
    
  },
  methods: {
    fetchData(id) {
      crudNews.get(id).then(response => {
        this.form = Object.assign({}, this.form, response.data)
      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      this.$router.push('/business/news')
    },

    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        MessageBox.confirm('您确认执行此操作吗？', '确认操作', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          if (this.form.deadline == null){
            this.form.deadline = ""
          }
          if (this.isEdit) {
            crudNews.edit(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '修改信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          } else {
            crudNews.add(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '提交信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        }).catch((e) => {
          console.log(e)
        });
      })
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}

</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
